<!DOCTYPE html> <!-- 告诉浏览器这个网页是H5的超文本标记语言 -->
<html lang="zh-CN"> <!-- 表示当前网站属于哪种语言的网站：en(英文)、zh(中文), 默认en, CN代表国家代码、具体详情参考：https://www.w3school.com.cn/tags/html_ref_country_codes.asp -->
<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5音视频</title> <!-- title标签的内容会同时也会作为搜索引擎中标题出现 -->
    <link href="../imgs/keai.gif" rel="shortcut icon"> <!-- 图标 -->
    <meta name="author" content="段永红">   <!-- 作者 -->
    <!-- 
        meta主要用于设置网页中的一些元数据, 元数据不是给用户看
        charset 指定网页的字符集
        name 指定数据的key
        content 指定数据的value
                keywords: 表示网站的关键字(搜索引擎根据content关键字进行搜索),多个关键字逗号隔开
                description: 网站描述,描述会显示在搜索引擎的搜索结果中
     -->
    <meta name="keywords" content="音视频演示,加老版本音视频控件"/> <!-- 搜索引擎网站标题关键字多个逗号隔开 -->
    <meta name="description" content="一个非常不错的网站"/> <!-- 搜索引擎网站描述介绍 -->
</head>
<body>
    <!-- 
        controls: 显示播放控件
        autoplay: 自动播放(大部分浏览器失效需借助js触发)
        loop: 循环播放
        muted: 静音播放
        写法1：<audio src="music/sound.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>

        写法2: 
        支持多种格式播放、根据type类型指定播放类型, 如果第一个source的格式不支持则自动采用第2个source来播放、从上往下寻找能播放的如果都不支持则显示：你的浏览器不支持audio播放
        音频支持的格式：mp3 wav ogg
    -->
    <section style="position: relative; height: 100px;"> <!-- position(默认static) -->
        <span style="position: absolute; line-height: 100px;">音频播放：</span>
            <audio style="position: absolute; top: 22px; margin-left: 100px;" controls="controls" loop="loop">                
                <source src="../music/sound.mp3" type="audio/mpeg"> 
                <source src="../music/sound.ogg" type="audio/ogg">

                <!-- IE9一下版本、及所有低版本的游览器、老播放器控件了 -->
                <embed src="../music/sound.mp3" type="audio/mp3" width="200px">
                <!-- 你的浏览器不支持audio播放, 有了embed标签这个提示就可以忽略了、因为embel老控件、所有浏览器都支持 -->
            </audio> 
                
           
    </section>
    <hr/>
    <!-- 
        controls: 显示播放控件
        autoplay: 自动播放(大部分浏览器失效需借助js触发)
        loop: 循环播放
        muted: 静音播放(会100%触发autoplay)
        preload: auto|none 规定是否预加载视频(如果有了autoplay就忽略该属性)
        poster: 加载等待画面图片、支持gif动图
        video视频标签、支持格式: webm(谷歌推出的新款格式体积小又高清)、mp4、ogg
        video标签基本属性与audio一样、也支持多种格式播放,这里直接按第2种来演示, 多种格式也是从上往下执行找出兼容的格式进行播放
     -->
    <section>
        <span style="position: absolute; line-height: 150px;">视频播放：</span>
         <video style=" margin-left: 100px;" poster="../imgs/c.gif" controls="controls" loop="loop">            
            <source src="../video/ixongchumo.mp4" type="video/mp4">
            <source src="../video/ixongchumo.ogg" type="video/ogg"> 

            <!-- IE9一下版本、及所有低版本的游览器、老播放器控件了 -->
            <embed src="../video/ixongchumo.mp4" type="video/mp4" width="200px">  
            <!-- 你的浏览器不支持video播放,有了embed标签这个提示就可以忽略了、因为embel老控件、所有浏览器都支持 -->
         </video>     
    </section>
</body>
</html>